<template>
	<view>
		<view class="zhtx-imgs">
			<view class="zhtx-single" v-for="(item, index) in list" :key="index" >
				<image :src="item" :data-src="item" mode="aspectFit" @tap="previewImg" />
				<view class="zhtx-del" @tap="deleteItem(index)">x</view> 
			</view>
			<view v-if="limit>list.length" class="zhtx-single zhtx-addNew" @tap="chooseFile">
				<text class="zhtx-add">+</text>
			</view>
		</view>
		<view class="num">
			<text style="color: #007AFF;font-size: 14px;">{{list.length?list.length:0}}</text>
			/{{limit}}
		</view>
	</view>
</template>

<script>
	
	let toast= msg=>{
		uni.showToast({
			title: msg,
			icon:'none'
		});
	}
	
	export default {
		props: {
			uImgList: {
				type: Array, //附件列表
				default () {
					return {}
				}
			},
			// uploadFileUrl: {
			// 	type: String,
			// 	dafault: '#' // 上传文件的服务器url
			// },
			// header: {
			// 	type: Object, //上传图片到服务器时，HTTP 请求 Header
			// 	default () {
			// 		return {}
			// 	}
			// },
			limit: {
				type: Number, //限制可上传的图片数量
				default: 9 //这里有问题???
			},
			// fileKeyName: {
			// 	type: String,
			// 	default: 'file' //用于在服务端通过自定义key值获取该文件数据
			// },
			canUploadFile: { //是否更新
				type: Boolean,
				default: true
			}
		},
		computed: {
			list: {
				get(){
					return this.uImgList
				}
			}
		},
		data() {
			return {
				imageList: [],
				cloudimgList:[]
			};
		},
		methods: {
			//预览
			previewImg(e) {
				console.log(...this.list);
				uni.previewImage({
					current: e.target.dataset.src,
					loop: true,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success:(data)=> {
							//可以自定义分享操作
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					},
					urls: this.list   //this.imageList,保持删除了的不在
				});
			},
			//删除
			deleteItem(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除此项吗？',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index,1)
							this.list.splice(index, 1); //已经达到了数据更新的状态
							// this.$forceUpdate(); //强制更新
							this.$emit('update:uImgList', this.list); //类似双向数据绑定
						}
					}
				});
			},

			chooseFile() {
				//双重保证
				// console.log(this.list);
				if (this.list.length >= this.limit) {
					toast('已达到最大上传数量')
					return; 
				}
				
				let canUploadFile = this.canUploadFile;
				let tempFiles;
				if (canUploadFile) {
					uni.chooseImage({
						count: this.limit - this.list.length,
						sizeType: ['original', 'compressed'], 
						sourceType: ['album', 'camera'],
						success: (res) => {
							console.log(res.tempFilePaths);
							tempFiles = res.tempFilePaths;
							
							this.imageList = this.imageList.concat(tempFiles)
							
							console.log(this.imageList);
							this.list.push(...tempFiles)//如果图片一次性就超过这个值怎么使他赋的值回退
							
							// #ifdef H5
							if (this.list.length >= this.limit) {
								this.list.splice(this.limit)
								toast('已达到最大上传数量')
								return; 
							}
							// #endif
							
							this.$emit('update:uImgList', this.list); //类似双向数据绑定,更新数据, 使用.sync修饰
							this.$forceUpdate();
							console.log(this.list);
						},
						fail:err=>{
							console.log(err);
						}
					});
						
				} 
			},
			
			upload(){
				let that = this;
				for (let i = 0; i < that.list.length; i++) {
					uniCloud.uploadFile({
						filePath: that.list[i],
						cloudPath:Date.now() + '.jpg',
						onUploadProgress: function(progressEvent) {
									var percentCompleted = Math.round(
										(progressEvent.loaded * 100) / progressEvent.total
									);
							    },
						success: (res) => {
							//保存图片的路径
							console.log(res,'ressssssss')
							if(res.success){
								that.$forceUpdate();
								that.cloudimgList.push(res.fileID);
							}
							
						},
						fail: (err) => {
							uni.hideLoading()
							// toast(err.errMsg)
							console.log(err);
						},
						complete: () => {
							//uni.hideLoading();
							if (that.cloudimgList.length == this.list.length) {
								uni.hideLoading();
								let options = {
									code:200,
									list:that.cloudimgList
								}
							    that.$emit('uploadSuccess', options);
								
							}
						}
					})
					}
				}
			},
		
	};
</script>

<style  >
	.zhtx-imgs {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.zhtx-del {
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		background: #f56c6c;
		color: #fff;
		top: 0;
		text-align: center;
		right: 0;
		line-height: 28rpx;
		font-size: 30rpx;
		z-index: 100;
	}
	.zhtx-single {
		position: relative;
		width: 180rpx;
		height: 180rpx;
		border: 1rpx solid #ccc;
		margin: 10rpx;
	}
	.zhtx-addNew {
		display: flex;
		justify-content: center;
		align-items: center;	
	}
	text {
		font-size: 50rpx;
		color: #999;
	}
	image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.num{
		float: right;
		color: #ccc;
		font-size: 12px;
	}
	.num::after{
		clear: both;
	}
</style>
